import { useColor } from "@/hooks/color";
import { useLoadedFontFamilyByAction } from "@/hooks/font";
import { Ionicons } from "@expo/vector-icons";
import { router } from "expo-router";
import React from "react";
import { TouchableOpacity } from "react-native";
import { Card, Colors, Text, View } from "react-native-ui-lib";

const SettingCardItem: React.FC<{ ioniconsName: React.ComponentProps<typeof Ionicons>["name"]; name: string }> = ({ ioniconsName, name }) => {
  const cardConfig: React.ComponentProps<typeof Card> = {
    elevation: 20,
    width: "100%",
    style: { backgroundColor: useColor().colors.background },
  };

  const ioniconsConfig: React.ComponentProps<typeof Ionicons> = {
    name: ioniconsName,
    size: 19,
    color: Colors.getColorTint(useColor().color.search, 30),
  };

  const textConfig: React.ComponentProps<typeof Text> = {
    style: { color: Colors.getColorTint(useColor().colors.text, 40), ...useLoadedFontFamilyByAction("SONG_BAIT") },
    text60: true,
  };

  return (
    <Card {...cardConfig} className='flex flex-row p-3 justify-between items-center' borderRadius-10>
      <View className='flex flex-row items-center gap-1 justify-center'>
        <Ionicons {...ioniconsConfig} />
        <Text {...textConfig}>{name}</Text>
      </View>
      <Ionicons name='chevron-forward' size={19} color={Colors.getColorTint(useColor().color.search, 40)} />
    </Card>
  );
};
interface AppSettingCardItemsProps {
  name: string;
  icon: React.ComponentProps<typeof Ionicons>["name"];
  router?: Parameters<typeof router.navigate>;
}
const SettingCard: React.FC<{ items: Array<Array<AppSettingCardItemsProps>> }> = ({ items }) => {
  const onPressByAction = (item: AppSettingCardItemsProps) => (item.router ? router.navigate(item.router[0]) : null);
  return (
    <View className='flex w-full items-center my-1 gap-3 py-3'>
      {items.map((item, index) => (
        <View className='flex w-full justify-between items-center my-1 gap-2' key={index}>
          {item.map((item, index) => (
            <TouchableOpacity key={index} onPress={() => onPressByAction(item)}>
              <SettingCardItem ioniconsName={item.icon} name={item.name} />
            </TouchableOpacity>
          ))}
        </View>
      ))}
    </View>
  );
};

export { SettingCard, AppSettingCardItemsProps };
